<template>
  <div class="shortcut-settings">
    <h3>快捷键设置</h3>
    <el-form>
      <div v-for="(shortcut, key) in shortcuts" :key="key" class="shortcut-item">
        <el-form-item :label="shortcut.description">
          <el-input
            v-model="shortcut.key"
            @keydown.prevent="recordShortcut($event, key)"
            placeholder="点击输入快捷键"
            readonly
          />
        </el-form-item>
      </div>
    </el-form>
    <div class="actions">
      <el-button type="primary" @click="saveShortcuts">保存设置</el-button>
      <el-button @click="resetShortcuts">重置默认</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const defaultShortcuts = {
  windowWidth: { key: 'Alt+W', description: '窗宽调整' },
  windowLevel: { key: 'Alt+L', description: '窗位调整' },
  nextView: { key: 'Alt+Right', description: '下一视图' },
  prevView: { key: 'Alt+Left', description: '上一视图' },
  resetView: { key: 'Alt+R', description: '重置视图' },
  toggleTools: { key: 'Alt+T', description: '显示/隐藏工具栏' }
}

const shortcuts = ref({ ...defaultShortcuts })

const recordShortcut = (event: KeyboardEvent, action: string) => {
  const key = []
  if (event.ctrlKey) key.push('Ctrl')
  if (event.altKey) key.push('Alt')
  if (event.shiftKey) key.push('Shift')
  
  const keyName = event.key.toUpperCase()
  if (!['CONTROL', 'ALT', 'SHIFT'].includes(keyName)) {
    key.push(keyName)
  }
  
  shortcuts.value[action].key = key.join('+')
}

const saveShortcuts = () => {
  localStorage.setItem('medical-viewer-shortcuts', JSON.stringify(shortcuts.value))
  ElMessage.success('快捷键设置已保存')
}

const resetShortcuts = () => {
  shortcuts.value = { ...defaultShortcuts }
  ElMessage.info('已重置为默认快捷键')
}

onMounted(() => {
  const savedShortcuts = localStorage.getItem('medical-viewer-shortcuts')
  if (savedShortcuts) {
    shortcuts.value = JSON.parse(savedShortcuts)
  }
})
</script>

<style scoped>
.shortcut-settings {
  padding: 20px;
}

.shortcut-item {
  margin-bottom: 15px;
}

.actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
</style> 